<template>
	<view class="category-container">
		<!-- 头部搜索区 -->
		<view class="search-wrapper">
			<view class="search">搜索商品</view>
		</view>
		<!-- 内容展示区 -->
		<view class="show-wrapper">
			<!-- 左侧导航 -->
			<view class="left-wrapper">
				<scroll-view class="item-list" enable-flex scroll-y>
					<view class="item" :class="{active:navIndex === index}" v-for="(item,index) in categoryList"
						:key="item.id" @click="changNavIndex(index)">
						<text class="item-title">{{item.name}}</text>
					</view>
				</scroll-view>
			</view>
			<!-- 右侧数据展示 -->
			<view class="right-wrapper">
				<scroll-view class="item-list" enable-flex scroll-y="true" @scroll="scrollHandle"
					:scroll-top="scrollTop">
					<image class="item-image" :src="navIndexData.imgUrl"></image>
					<!-- 图片文字数据 -->
					<view class="item-wrapper">
						<view class="item" v-for="item in navIndexData.subCateList" :key="item.id" @click="toDetail">
							<image class="item-pic" :src="item.wapBannerUrl"></image>
							<text class="item-title">{{item.name}}</text>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="goTop" v-if="isTop" @click="goTop">
				返回
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				categoryList: {}, //分类页数据
				navIndex: 0, //左侧导航的数据
				isTop: false,
				scrollTop: 0

			}
		},
		created() {
			this.getcategoryList()
		},
		computed: {
			navIndexData() {
				return this.categoryList[this.navIndex];
			}
		},
		methods: {
			async getcategoryList() {
				let res = await uni.$http(uni.$base.categoryData)
				console.log('res', res);
				this.categoryList = res
			},
			//改变NavIndex
			changNavIndex(newIndex) {
				this.navIndex = newIndex;
				this.scrollTop = this.scrollTop == 0 ? 0.01 : 0
			},
			scrollHandle(e) {
				e.detail.scrollTop > 100 ? (this.isTop = true) : (this.isTop = false)
			},
			goTop() {
				// 返回顶部
				this.scrollTop = this.scrollTop == 0 ? 0.01 : 0
				this.isTop = false
			},
			toDetail() {
				uni.navigateTo({
					url: '/pages/goodsDetail/goodsDetail'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.category-container {

		// 搜索框
		.search-wrapper {
			padding: 10rpx 0;

			.search {
				height: 60rpx;
				line-height: 60rpx;
				width: 92%;
				background-color: #eee;
				font-size: 28rpx;
				text-align: center;
				// view容器居中
				margin: 0 auto;
				border-radius: 8rpx;
			}
		}

		// 内容展示
		.show-wrapper {
			width: 100%;
			display: flex;
			border-top: 1rpx solid #eee;
			font-size: 28rpx;
			text-align: center;

			// 左侧
			.left-wrapper {
				border-right: 1rpx solid #eee;
				width: 20%;

				.item-list {
					display: flex;
					flex-direction: column;
					// 动态计算高度
					height: calc(100vh - 82rpx);

					.item {
						height: 80rpx;
						line-height: 80rpx;
						position: relative;

						&.active:before {
							position: absolute;
							left: 4rpx;
							top: 10rpx;
							content: "";
							width: 4rpx;
							height: 60rpx;
							background-color: #be3f13;
						}
					}
				}
			}

			// 右侧
			.right-wrapper {
				width: 80%;

				.item-list {
					// 动态计算高度
					height: calc(100vh - 82rpx);

					.item-image {
						width: 530rpx;
						height: 190rpx;
						margin: 10rpx auto;
						display: block;
					}

					.item-wrapper {
						display: flex;
						flex-wrap: wrap;

						.item {
							width: 33.333%;

							// 图片
							.item-pic {
								height: 144rpx;
								width: 90%;
							}

							// 文字
							.item-title {
								font-size: 24rpx;
							}
						}
					}
				}
			}
		}

		.text {
			font-size: 0;
		}
	}

	.goTop {
		position: fixed;
		right: 20rpx;
		bottom: 20rpx;
		background: rgba(0, 0, 0, 0.3);
		font-size: 12px;
		width: 60rpx;
		height: 60rpx;
		color: white;
		text-align: center;
		line-height: 60rpx;
		border-radius: 50%;
	}
</style>